<template>
	<view class="inputs-box">
		<view class="item" v-for="(x,key) in value" :key="key">
			<slot :row="value[key]" :index="key" :disabled="disabled"></slot>
			<view class="btns">
				<view v-if="key == value.length-1 && !disabled" class="btn-primary formicon form-jia" @click="value.push({})"></view>
				<view v-else-if="!disabled" class="formicon form-jia btn-warn" @click="value.splice(key,1)"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"yInputs",
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
			value: {
				type: Array,
				default () {
					return [{}]
				}
			}
		},
		watch: {
			value: {
				handler(n, v) {
					if (!(Array.isArray(n) && n.length)) {
						this.$emit("input", [{}]);
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			add(e) {
				const {
					name,
					value
				} = e;
				if (name && value) {
					this.$emit('input',[...value,{}]);
				} else {
					uni.showToast({
						icon:"none",
						title:"表单必须填写，才能继续新增",
						duration:3000
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.inputs-box {
		flex: 1;

		.item {
			display: flex;
			align-items: center;
			margin: 10rpx 0;
			.btns {
				white-space: nowrap;
				display: flex;
				.formicon{
					margin-left: 15rpx;
				}
			}
		}
		.form-jia{
			border-radius: 50%;
			background-color: #007aff;
			color: #FFFFFF;
			font-size: 20rpx;
			width: 2.5em;
			height: 2.5em;
			line-height: 2.5em;
			display: flex;
			justify-content: center;
			align-items: center;
			&.btn-warn{
				background-color: #e64340;
				transform: rotateZ(45deg);
			}
		}
	}
</style>
